<template>
    <h2>显示页面</h2>
    借款名称:<input type="text" v-model="R_Name">
    利息:
    <select v-model="I_Id">

        <option v-for="item in datas" :value="item.I_Id">{{ item.I_Interest }}</option>
    </select>
    <input type="button" value="查询" @click="Show">
    <table>
        <thead>
            <tr>
                <td>借款编号</td>
                <td>借款款项名称</td>
                <td>借款最高金额</td>
                <td>借款最高年限</td>
                <td>月还款金额</td>
                <td>利息编号</td>
                <td>借款款项简介</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in data" :key="item.R_Id">
                <td>{{ item.R_Id }}</td>
                <td>{{ item.R_Name }}</td>
                <td>{{ item.R_Max }}</td>
                <td>{{ item.R_Year }}</td>
                <td>{{ (item.R_Max / 12).toFixed(2) }}CNY</td>
                <td>{{ item.I_Interest }}</td>
                <td>{{ item.R_Dess }}</td>
                <td>
                    <input type="button" value="删除" @click="Del(item.R_Id)">
                    <input type="button" value="修改" @click="Upa(item.R_Id)">
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script lang="ts" setup>

import { ref } from 'vue'
import { onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const data = ref([{
    R_Id: '',
    R_Name: '',
    R_Max: 0,
    R_Year: '',
    I_Interest: '',
    R_Dess: '',


}])
const R_Name = ref('');
const I_Id = ref('');
const datas = ref([]);

onMounted(() => {
    axios.get('http://localhost:52545/api/Demo/Bind')
        .then(res => {
            datas.value = res.data;
        })
        .catch(error => {
            console.log(error);
        })
    Show()
})

const Show = () => {
    axios.get('http://localhost:52545/api/Demo/Show', {
        params: {

            R_Name: R_Name.value,
            I_Id: I_Id.value

        }
    })
        .then(res => {
            data.value = res.data;
        })
        .catch(error => {
            console.log(error)
        })
}
const Del = (R_Id: number) => {
    if (confirm("确定要删除吗")) {
        axios.get('http://localhost:52545/api/Demo/Del', {
            params: {
                R_Id: R_Id
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert("删除成功");
                    Show()
                    return;
                }
                else {
                    alert("删除失败");
                }
            })
    }
}

const router = useRouter();
const Upa = (R_Id: number) => {
    router.push({
        name: "RUpa",
        params: {
            R_Id: R_Id
        }
    })
}
</script>